<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery模拟安卓系统的图案锁插件patternLock</title>
<link href="patternLock.css"  rel="stylesheet" type="text/css" />
<script src="http://libs.useso.com/js/jquery/2.1.1/jquery.min.js"></script>
<script src="patternLock.js"></script>
<style type="text/css">
	#warp{width:600px; margin:auto;}
	#warp div{margin-bottom:50px;}
</style>
<script>
	$(function(){
			var lock = new PatternLock("#patternContainer");
			
			var lock1 = new PatternLock("#patternContainer1",{lineOnMove:false});
			
			var lock2 = new PatternLock("#patternContainer2",{patternVisible:false});
			
			var lock3 = new PatternLock("#patternContainer3",{radius:30,margin:20});
			
			var lock4 = new PatternLock("#patternContainer4",{matrix:[4,4]});
			
			var lock5 = new PatternLock("#patternContainer5",
				{
					mapper: function(idx){
						return (idx%9) + 1;
				 }
			});
			
		})
	
</script>
</head>

<body>
<div id="warp">
	<h1>图案锁实例</h1>
    <p>1、基础初始化</p>
    <div id="patternContainer"></div>
    <p>2、两点间到达目标点才画线</p>
    <div id="patternContainer1"></div>
    <p>3、当图案连线完成后才显示连线</p>
    <div id="patternContainer2"></div>
    <p>4、改变两个点之间的距</p>
    <div id="patternContainer3"></div>
    <p>5、自定义距阵</p>
    <div id="patternContainer4"></div>
    <p>6、使用映射</p>
  <div id="patternContainer5"></div>
    <p>7、作为验证码使用，这个在服务端需用到  <a href="http://ignitersworld.com/lab/patternCaptcha.html">patternCaptha</a>,有兴趣的朋友可以研究下，这里就不多说了。</p>
    <div id="patternContainer6"></div>
</div>
</body>
</html>
